<template>
    <!-- 导航栏 -->
    <van-nav-bar title="忘记密码" left-text="返回" left-arrow @click="onClickLeft" />

    <!-- 图片 -->
    <img class="restpwd_img1" src="../../assets/img/login.jpg" alt="">

    <!-- 表单 -->
    <van-form @submit="onSubmit">
        <van-popup v-model:show="showCenter" duration="0.3" round :style="{ padding: '64px' }">{{ text }}</van-popup>
        <van-cell-group inset>
            <van-field v-model="phone" name="phone" label="手机号码" placeholder="请输入手机号码"
                :rules="[{ required: true, message: '请填写手机号' }]" />

            <van-field v-model="password" type="password" name="password" label="登录密码" placeholder="请输入登录密码"
                :rules="[{ required: true, message: '请填写密码' }]" />
            <van-field v-model="reppassword" type="password" name="password" label="重复密码" placeholder="请输入再次登录密码"
                :rules="[{ required: true, message: '请再次填写密码' }]" />

            <van-field v-model="testcode" center clearable label="短信验证码" placeholder="请输入短信验证码"
                :rules="[{ required: true, message: '请输入验证码' }]">
                <template #button>
                    <van-button v-if="times === 0" @click="startTimer()" size="small" type="primary">发送验证码</van-button>
                    <div v-else>{{ times }}之后再发送</div>
                </template>
            </van-field>
        </van-cell-group>

        <div style="margin: 16px;">
            <van-button round block type="primary" native-type="submit" @click="onSubmit">
                找回密码
            </van-button>
        </div>
    </van-form>

    <!-- 版权组件 -->
    <CopyRight></CopyRight>
</template>

<script>
import CopyRight from '../../zujian/copyRight.vue'
import axios from 'axios'
import { showDialog } from 'vant'
export default {
    data() {
        return {
        $uniq:'phone',
        phone: '17858984792',
        testcode: 'a1b2',
        password: '1234567',
        reppassword: '1234567',
        times:0
        }
    },
    methods: {
        onClickLeft() {
            history.back()
        },
        startTimer(){
            // clearInterval(this.timerId)
            this.times = 60
            this.timerId = setInterval(()=>{
                this.times--
                if(this.times===0){
                    clearInterval(this.timerId)
                }
            },1000)
            
        },
        onSubmit(){
            if(this.password !== this.reppassword){
                 showDialog({ message: '两次输入的密码不一致' })
                 return
                
            }
            axios.post('http://localhost:6001/modify/member',{
                search:{phone: this.phone},
                password:this.password
                
            }).then(res=>{
                // console.log(res);
                // const data = res.data
                // if(!data.success){
                //     return alert(data.message)
                // }
                // // console.log();
                // localStorage.userId = data.result._id
                // this.$store.commit('setPersonal',data.result)
                this.$router.push('/login')
                // console.log(data);

            })
        }
    },
    components: {
        CopyRight
    },
    beforeUnmount(){
        clearInterval(this.timerId); // 清理定时器
    }
}
</script>

<style scoped>
.restpwd_img1 {
    width: 100%;
}
</style>